Creating the “Hello World” Widget

To learn how to create a widget, create a simple widget in the site root/widgets folder. This widget is based on the Hello World widget that is installed with the Developer Sample site with the following files:

• HelloWorld.ascx - user control file
• HelloWorld.ascx.cs - user control codebehind file
• HelloWorld.ascx.jpg - image that represents this control on the widget menu

Step 1: Copy, Paste and Rename HelloWorld.ascx and HelloWorld.ascx.jpg

1. Open your Web site in Visual Studio.
2. In the Visual Studio Solution Explorer, open the widgets folder.
   Show me.

   

3. Within that folder, scroll down to and select HelloWorld.ascx.
   Show me.

   

4. Right click the mouse and choose Copy.
5. Scroll up to the widgets folder.
6. Right click the mouse and choose Paste.
   Show me.

   

7. Scroll down until you see Copy of HelloWorld.ascx.
8. Right click the mouse and choose Rename.
   Show me.

   

9. Rename the file new_widget.ascx. Notice that Visual Studio also renames the codebehind file to new_widget.ascx.cs.
10. The image file is 48 x 48 pixels and 72 dpi.
11. Copy, paste, then rename the helloworld.ascx.jpg file to new_widget.ascx.jpg. Ektron CMS400.NET administrators (like Grace) and content authors (like the Marketing team) use a widget’s image to select it, as shown below.
    Show me.

    

Step 2: Update the Class Names in the New Files

1. Open new_widget.ascx.
2. On the first line of that file, replace the reference to HelloWorld (circled below) with new_widget.
   Show me.

   

3. Open the codebehind file, new_widget.ascx.cs.
4. Again, replace the class HelloWorld with new_widget.
   Show me.

   

5. Save new_widget.ascx and new_widget.ascx.cs.
6. Check both files for errors by choosing Build > Build Page. Correct any errors before proceeding.

Step 3: Add Widget in Ektron CMS400.NET Workarea

1. Open the Ektron CMS400.NET Workarea.
2. Choose Settings > Configuration > Personalizations > Widgets.
3. Click Synchronize ().
4. You see the new user control file, new_widget.ascx, at the bottom of the screen.
   Show me.

   

5. Choose Settings > Configuration > Template Configuration.
6. Find the template that you created in Building Pages, PageLayout.aspx. Or, any Wireframe template that you are using to create a PageBuilder page.
   Show me.

   

7. Click Update.
8. On the Update Template screen, scroll down until you see the new widget.
   Show me.

   

9. Click Select All (circled in the figure).
10. Click Save ().
11. For directions on creating a PageBuilder page, see Steps to Creating a “PageBuilder” Page
12. Go to Content and select a folder that has a PageBuilder page.
13. Edit the PageBuilder page.
14. Open the Widget menu.
15. Make sure your new widget appears on the menu.
    Show me.

    

After you create a new widget and enable it in the Ektron CMS400.NET Workarea, you can begin to customize it. For more information about customizing widgets, see Customizing Widgets.

The next sections explain details about the files you copied and renamed above.

• Understanding the User Control (.ascx) File
• Understanding the Codebehind (.ascx.cs) File